<template>
  <el-image :class="bem()" :src="src" v-bind="$attrs" v-on="$listeners">
    <div slot="placeholder" class="image-slot">
      加载中
      <span class="dot">...</span>
    </div>
    <div slot="error" class="image-slot">
      <i class="el-icon-picture-outline icon-size"></i>
    </div>
  </el-image>
</template>

<script>
import create from 'utils/create'

export default create({
  name: 'image',
  inheritAttrs: false,
  props: {
    src: {
      type: String,
      default: ''
    }
  }
})
</script>

<style lang="less">
.c-image {
  display: flex;
  height: 60px;
  img {
    align-items: center;
    justify-items: center;
  }
  .image-slot {
    width: 100%;
    line-height: 80px;
    text-align: center;
    .icon-size {
      font-size: @f28;
    }
  }
}
</style>
